<template>
  <div>
    <!-- <div class="item_title">
      <div><img src="../assets/img/fanhui32.png" alt=""></div>
      <div>{{movieObj.nm}}</div>
      <div></div>
    </div> -->
    <header3></header3>
    <header1>{{ movieObj.nm }}</header1>
    <div class="movie-detail">
      <div class="mask"></div>
      <div class="poster-bg" :style="bg">
      </div>
      <div class="a1"><img :src="movieObj.img" alt="" />
        <div class="itemcon">
          <div class="itemcon1">{{ movieObj.nm }}</div>
          <div class="itemcon2">{{ movieObj.nm }}</div>
          <div class="itemcon3">
            <span>{{ movieObj.scoreLabel }}</span>
          </div>
          <div class="itemcon4">
            <span>{{ movieObj.cat }}</span>
            <span></span>
          </div>
          <div class="itemcon5">
            {{ movieObj.src }}/{{ movieObj.episodeDur }}分钟
          </div>
          <div class="itemcon6">{{ movieObj.pubDesc }}</div>
        </div>
        <div class="tubiao1">
          <img src="../assets/img/xiangyou.png" />
        </div></div>
    </div>
    <!-- <div class="a1" :style="bg">
      <img :src="movieObj.img" alt="">
    <div class="itemcon">
      <div class="itemcon1">{{movieObj.nm}}</div>
      <div class="itemcon2">{{movieObj.nm}}</div>
      <div class="itemcon3">
        <span>{{movieObj.scoreLabel}}</span>
      </div>
      <div class="itemcon4">
        <span>{{movieObj.cat}}</span>
        <span></span>
      </div>
      <div class="itemcon5">{{movieObj.src}}/{{movieObj.episodeDur}}分钟</div>
      <div class="itemcon6">{{movieObj.pubDesc}}</div>
    </div>
    <div class="tubiao1">
      <img src="../assets/img/xiangyou.png"/>
    </div>
    </div> -->
    <div class="time-box">
      <ul class="shijian">
        <li
          v-for="(item, index) in dateArr"
          :key="item.date"
          @click="getCinemaData(item.date, index)"
          :class="index == activeid ? 'active' : ''"
        >
          {{ item.date | format(index) }}
        </li>
      </ul>
    </div>
    <ul class="cinemalist">
      <li v-for="item in cinemaArr" :key="item.id">
         <div>
          {{ item.nm }}
          <span class="txt0">
            <span class="txt1">{{ item.price }}</span>
            <span class="txt2">元起</span>
          </span>
         </div>
        <div class="dizhi">
          {{ item.addr }}
        </div>
        <div class="zibiao">
          <div class="zibiao1">退</div>
          <div class="zibiao2">改签</div>
          <div class="zibiao3">小吃</div>
          <div class="zibiao4">折扣卡</div>
        </div>
        <div class="youhui">
          <div class="youhui1"><img src="../assets/img/ka.png" /></div>
          <div class="youhui2">开卡特惠，首单一张最高立减3元</div>
        </div>
        <div class="kaichang">
          <span>近期场次：</span>
          {{ item.showTimes }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import header1 from "@/components/commonh/header1.vue";
import header3 from "@/components/commonh/header3.vue";
export default {
  name: "item",
  components: {
    header3,
    header1,
  },
  data: function () {
    return {
      movieObj: {},
      dateArr: [],
      bg: "",
      cinemaArr: [], //影院信息
      id: 0, //电影ID
      activeid: 0,
    };
  },
  filters: {
    //将年月日 转成 星期加月日
    //bug:获取 今天的日期和传过来的日期比较
    format(value, index) {
      var arr = value.split("-");
      console.log(arr);
      var str = "";
      var tian = ["今天", "明天", "后天"];
      //传过来的日期
      var d1 = new Date(value)
      //今天的日期
      var dd = new Date()
      var y = dd.getFullYear();
      var m = dd.getMonth() +1;
      var d = dd.getDate();
      
      var d2 = new Date(y +"-"+ m + "-" + d);
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24)

      if(tian[iday] !=undefined){
        str = tian[iday];
      } else {
        str = `周${"日一二三四五六".charAt(new Date(value).getDay())}`
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
  },
  methods: {
    getCinemaData(date, index) {
      this.activeid = index;
      this.getData(date);
      console.log(date);
    },
    getData(date) {
      axios
        .get(
          "/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=" +
            this.id +
            "&serviceId=-1&stationId=-1&showDate=" +
            date +
            "&cityId=30&ci=30"
        )
        .then((res) => {
          //console.log(res);
          //获取了新数据会给  this.cinemaArr 重新赋值，页面就会重新渲染
          this.cinemaArr = res.data.data.cinemas;
        });
    },
  },

  mounted() {
    //获取 首页传过来的参数
    this.id = this.$route.params.id;
    axios.get("/api/mtrade/mmdb/movie/v5/" + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
      this.bg = `background:url("${this.movieObj.img}");`;
      // this.bg = `background:url(${this.movieObj.img}) no-repeat`
    });

    //获取 上映日期的数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          this.id +
          "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        this.getData(this.dateArr[0].date);
      });
  },
};
</script>

<style scoped>
.movie-detail {
  position: relative;
  height: 188px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-top: 111.5px;
  z-index: -1;
}
.movie-detail .mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
}
.movie-detail .poster-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  /* -webkit-filter: blur(1.2rem); */
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.a1 {
  width: 330px;
  height: 150px;
  /* margin-top: 110px; */
  padding: 19px 30px 19px 15px;
  display: flex;
  /* background: gray; */
  position: relative;
}
.itemcon {
  width: 190px;
  height: 150px;
  margin-left: 12.5px;
  font-size: 12px;
  color: #fff;
}
.itemcon .itemcon1 {
  font-size: 20px;
  font-weight: bold;
}
.itemcon .itemcon2 {
  font-size: 12px;
  margin-top: 5px;
}
.itemcon .itemcon3 {
  font-size: 18px;
  color: #ffcc00;
  font-weight: bold;
  margin-top: 5px;
}
.itemcon .itemcon4,
.itemcon .itemcon5,
.itemcon .itemcon6 {
  margin-top: 5px;
}
.a1 img {
  width: 110px;
  height: 150px;
}
.a1 .tubiao1 {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 85px;
  left: 345px;
}
.a1 .tubiao1 img {
  width: 15px;
  height: 15px;
}
.cinemalist li {
  /* width: 100%; */
  height: 143px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  position: relative;
}
.cinemalist li .txt0 {
  position: absolute;
  right: 10px;
}
.cinemalist li .txt1 {
  font-size: 18px;
  color: #f03d37;
}
.cinemalist li .txt2 {
  font-size: 12px;
  color: #f03d37;
}
.cinemalist li .dizhi {
  width: 345px;
  height: 19px;
  margin-top: 10px;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zibiao {
  display: flex;
  font-size: 14px;
  margin-top: 10px;
}
.zibiao .zibiao1 {
  border: 1px solid #589daf;
  color: #589daf;
  border-radius: 3px;
}
.zibiao .zibiao2 {
  border: 1px solid #589daf;
  color: #589daf;
  margin-left: 5px;
  border-radius: 3px;
}
.zibiao .zibiao3 {
  border: 1px solid #ff9900;
  color: #ff9900;
  margin-left: 5px;
  border-radius: 3px;
}
.zibiao .zibiao4 {
  border: 1px solid #ff9900;
  color: #ff9900;
  margin-left: 5px;
  border-radius: 3px;
}
.cinemalist li .youhui {
  width: 345px;
  height: 18px;
  display: flex;
  margin-top: 10px;
}
.cinemalist li .youhui .youhui1 img {
  width: 18px;
  height: 18px;
}
.cinemalist li .youhui .youhui2 {
  font-size: 12px;
  margin-left: 5px;
  color: #999999;
}
.cinemalist li .kaichang {
  font-size: 12px;
  color: #999999;
  margin-top: 10px;
}
.time-box {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  overflow: scroll;
  background: #fff;
}
.shijian {
  width: 1200px;
  /* height: 45PX; */
  display: flex;
}
.time-box .shijian li {
  width: 130px;
  height: 42px;
  line-height: 45px;
  text-align: center;
  /* border-bottom: 1px solid rgb(197, 189, 189); */
}
.time-box .shijian li.active {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}
/* .shijian{
  display: flex;
  height: 45px;
}
.shijian li{
  width: 115px;
  height: 45px; 
  margin-left: 4.5px;
  float: left;
} */

/* .time-box {
  box-sizing: border-box;
  width: 10rem;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.373333rem;
  overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
}
.time-box > ul {
  width: 10rem;
  overflow-x: scroll;
  display: flex;
  flex-wrap: nowrap;
}
.time-box > ul > li {
  height: 1.2rem;
  padding-left: 0.133333rem;
}
.time-box ul::-webkit-scrollbar {
  display: none;
}
.time-box > ul > li > div {
  width: 3.066667rem;
  height: 1.2rem;
  line-height: 1.2rem;
  color: #666;
  text-align: center;
} */

/* .item_title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #e54848;
  display: flex;
  justify-content: space-around;
}
.item_title img{
  width: 25px;
  height: 25px;
  margin-top: 12px;
  margin-right: 20px;
}
.item_title div:nth-of-type(1),
.item_title div:nth-of-type(3) {
  width: 15%;
  text-align: center;
}
.item_title div:nth-of-type(2) {
  width: 70%;
  text-align: center;
  color: #fff;
  font-size: 20px;
} */
</style>